<template>
  <div class="wrapper">
    <!--  header部分  -->
    <header>
      <p>我的钱包</p>
    </header>

    <ul class="k1">
      <li class="balance">
        <img src="../assets/m1.jpg" alt="图片" class="m1">
        <p class="p1" >我的余额</p>
        <p class="p2">{{  virtualWallet.money }}</p>
        <!--  virtualWallet.money  -->
      </li>

      <li class="in">
        <img src="../assets/m2.jpg" alt="图片" class="m2">
        <p class="p3">我的积分</p>
        <p class="p4">{{ EffectiveIntegral }}</p>
      </li>
      <!--  integral.count  -->
    </ul>

    <div class="k2">
      <ul class="form-box">
        <li>
          <div class="title">
            交易金额:
          </div>
          <div class="content">
            <input type="number" v-model.number="num" placeholder="充值/提现金额(元)">
          </div>
        </li>
      </ul>

      <ul class="JY">
        <li class="button-recharge">
          <img src="../assets/m3.jpg" alt="图片" class="m3">
          <button>充值</button>
        </li>
        <li class="button-take">
          <img src="../assets/m4.png" alt="图片" class="m4">
          <button >提现</button>
        </li>
        <li class="button-list">
          <img src="../assets/m5.jpg" alt="图片" class="m5">
          <button @click="toList">记录</button>
        </li>
      </ul>
    </div>

    <div class="k3">
      <ul class="form-box">
        <li>
          <div class="title">
            积分兑换:
          </div>
          <div class="content">
            <input type="number" v-model.number="nc" placeholder="兑换积分数量:10或100">
          </div>
        </li>
      </ul>

      <ul class="JY">
        <div class="count-list">
          <img src="../assets/m6.jpg" alt="图片" class="m6">
          <button @click="tohuan">兑换</button>
        </div>

        <div class="count-list">
          <img src="../assets/m7.jpg" alt="图片" class="m7">
          <button @click="toIntegralList">明细</button>
        </div>
      </ul>
    </div>

    <div class="introduction">
      <p>积分细则：</p>
      <li>1.新用户注册送10积分</li>
      <li>2.消费满10元获取1积分，不满10元部分不计积分</li>
      <li>3.10积分可兑换1元，100积分可兑换11元</li>
    </div>

    <!-- 底部菜单部分 -->


    <Footer></Footer>
  </div>

</template>


<script>
import Footer from '../components/Footer.vue';


export default {
  name: 'VirtualWallet',
  data() {
    return {
      user: {},
      virtualWallet: {},
      num: '',
      integral: {},
      nc: '',
      EffectiveIntegral:''
    }
  },


  created() {
    this.user = this.$getSessionStorage('user');
    //获取我的余额数据
    this.$axios.post('WalletController/getWalletByUserid', this.$qs.stringify({
      userId: this.user.userId
    })).then(response => {
      this.virtualWallet = response.data;
    }).catch(error => {
      console.error(error);
    });

    //从积分明细表获取当前有效积分
    this.$axios.post('IntegrationlogController/getIntegrationlogByUserIdByTime', this.$qs.stringify({
      userId: this.user.userId
    })).then(response => {
      this.EffectiveIntegral = response.data;
    }).catch(error => {
      console.error(error);
    });

    /*获取我的积分数据(未更新过期版）
    this.$axios.post('IntegralController/getIntegralByUserid', this.$qs.stringify({
      userId: this.user.userId
    })).then(response => {
      this.integral = response.data;
    }).catch(error => {
      console.error(error);
    });
     */

  },


  methods: {

    tohuan() {

      if (this.nc > this.EffectiveIntegral) {
        alert('积分不足，请检查提现金额');
        return;
      }

      let nn = this.nc
      if (this.nc == 10 || this.nc == 100) {
        alert('开始兑换！');
        if(this.nc == 100){
          nn = this.nc + 10;
        }
      } else {
        alert('请输入10或者100！');
        return;
      }

      //支付后积分增加*****************************************************************


      //积分减少，更新单个积分明细表
      this.$axios.post('IntegrationlogController/deleteIntegrationlogByUserIdByTime',this.$qs.stringify({
        userId: this.user.userId,
        count: this.nc
      })).then(response =>{
        if(response.data > 0) {
        //  alert('积分已减少');
        }else{
          alert('积分更新失败！');
        }
      }).catch(error =>{
        console.error(error);
      });
      //积分减少后，更新积分总表
      this.$axios.post('IntegralTransController/saveIntegralTrans', this.$qs
          .stringify({
            userId: this.user.userId,
            count:this.nc,
            type:0
          })).then(response => {
        if(response.data>0){
         // alert('积分明细表更新成功！')
        }else{
          alert('积分明细表更新失败！')
        }
      }).catch(error => {
        console.error(error);
      });

      //重新获取积分总数
      this.$axios.post('IntegrationlogController/getIntegrationlogByUserIdByTime', this.$qs.stringify({
        userId: this.user.userId
      })).then(response => {
        this.EffectiveIntegral = response.data;
      }).catch(error => {
        console.error(error);
      });


      //积分换余额后 余额增加
      this.$axios.post('WalletController/updateMoney', this.$qs.stringify({
        userId: this.user.userId,
        money: this.virtualWallet.money + parseInt(nn / 10),
      })).then(response => {
        if (response.data > 0) {
          alert('兑换成功！恭喜发财！');
        } else {
          alert('兑换失败！再接再厉ヾ(￣▽￣)Bye~Bye~');
        }
      }).catch(error => {
        console.error(error);
      })
    },


    toList(){
      this.$router.push({ path: '/charts' });
    },

    toIntegralList(){
      this.$router.push({ path:'/IntegralList' });
    }



  },


  components: {
    Footer
  }
}
</script>


<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/***************************************header部分**/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(royalblue, #4d6dec, #2a34a6);
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .introduction {
  font-size: 3.8vw;
  padding-left: 5vw;
  margin-top: 37vw;
  padding-top: 5vw;
  padding-bottom: 10vw;
  /*background: linear-gradient(#F37373, #F3B373, #F3F373);*/
  color: #ABB2B9;
}


.wrapper .k1 {
  width: 98%;
  height: 35vw;
  margin-left: 4px;

  margin-top: 14vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /*把两行当成整体居中 align-items各自居中*/
  align-content: center;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}

.wrapper .k2 {
  width: 98%;
  height: 35vw;
  margin-left: 4px;

  border-radius: 5px;
  background: white;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}

.wrapper .k3 {
  width: 98%;
  height: 35vw;
  margin-left: 4px;

  border-radius: 5px;
  background: white;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}


.m1 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m2 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m3 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m4 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m5 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m6 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m7 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.wrapper .k1 .balance {
  width: 50%;
  height: 20vw;
  margin-top: 7vw;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}


.wrapper .k1 .balance p1 {
  font-size: 4vw;
  margin-top: 2vw;
  color: #000;
}

.wrapper .k1 .balance p2 {
  font-size: 4vw;

  color: #EF92C0;
}


.wrapper .k1 .in {

  width: 50%;
  height: 22vw;
  margin-top: 7vw;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.wrapper.k1 .in p3 {
  font-size: 4vw;
  margin-top: 3vw;
  color: #000;

}

.wrapper .k1 .in p4 {
  font-size: 4vw;
  margin-top: 1vw;
  color: #568;

}

/********************交易金额与积分兑换及其输入区域********************/


.wrapper .form-box {
  width: 100%;
  margin-top: 3vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}

.wrapper .form-box li .title {
  flex: 0 0 22vw;
  font-size: 4vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 4vw;

}


/********************按键区域********************/


.wrapper .JY {
  width: 100%;

  background-color: white;
  display: flex;

  justify-content: center;
  flex-direction: row;

}

.wrapper .JY .button-recharge {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .button-recharge button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .JY .button-take {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .button-list {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .count-list {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .button-take button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .JY .button-list button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .JY .count-list button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}


</style>
